<template>
  <div class="multiple_choice">
    <m-header modile-title="意见多选" go-back="true"></m-header>
    <!--<div class="multiple_body">
      <div class="Flex">
        <ul class="heart">
          <li
            v-for="item in heartData"
            :key="item.value"
            @click="showD(item)"
            :class="{'active':item.show===true}"
          >{{item.name}}</li>
        </ul>
      </div>
    </div>-->
    <embed :src='url'/>
  </div>
</template>

<script>
    import mHeader from '../../../components/header'
    export default {
        name: "MultipleChoice",
        data(){
          return{
            checkedData: [],//选中的数据
            heartData: [
              {
                value: 1,
                name: "质量优良",
                show: false
              },
              {
                value: 2,
                name: "态度很好",
                show: false
              },
              {
                value: 3,
                name: "效率很高",
                show: false
              },
              {
                value: 4,
                name: "反馈及时",
                show: false
              },
            ],
            selectCon: "", //返回的当前选中数据
            url: 'https://abc.wykbw.com/cspdf.pdf'
          }
        },
        methods: {
          showD(item) {
            // 选中取消 取消选中
            item.show = !item.show;
            //当前选中的数据
            this.checkedData = this.heartData.filter(item =>{
              return item.show == true;
            });
            //当前选中数据
            this.selectCon = "";
            for (var i = 0;i < this.checkedData.length; i++) {
              this.selectCon += this.checkedData[i].name + "  ";
            }
            console.log(this.selectCon);
            // console.log(this.checkedData);
          }
        },
        components: {
            mHeader
        }
    }
</script>

<style lang="scss" scoped>
.multiple_choice{
  width: 100%;
  padding-top: 60px;
  .multiple_body{
    .heart{
      background: #f9f9f9;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      li {
        line-height: 16pt;
        border: 1px solid #ddd;
        padding: 7pt 10pt;
        width: 72pt;
        border-radius: 20pt;
        text-align: center;
        font-size: 10pt;
        background: #ffffff;
      }
    }
    .active {
      background: #fff;
      border: 1px solid #EB7054 !important;
      color: #EB7054;
    }
  }
}
</style>
